<template>
  <div class="chatdetial">
    <div class="header">
      <div class="title-box">
        <div class="title">
          {{room.name}}
        </div>
      </div>

      <div @click="openShowGroupDetail">
        <svg
          t="1681535082973"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2956"
          data-spm-anchor-id="a313x.7781069.0.i2"
          width="22"
          height="22"
        >
          <path
            d="M98.357122 818.73194c-14.213723 0-25.764803 11.532661-25.764803 25.76071 0 14.233166 11.55108 25.770943 25.764803 25.770943M922.866648 818.73194 98.128925 818.73194c-14.21884 0-25.770943 11.532661-25.770943 25.76071 0 14.233166 11.552104 25.770943 25.770943 25.770943l824.737724 0c14.213723 0 25.764803-11.538801 25.764803-25.770943C948.633498 830.262554 937.081395 818.73194 922.866648 818.73194zM98.357122 483.770052c-14.213723 0-25.764803 11.537777-25.764803 25.76992 0 14.229073 11.55108 25.764803 25.764803 25.764803M922.866648 483.770052 98.128925 483.770052c-14.21884 0-25.770943 11.537777-25.770943 25.76992 0 14.229073 11.552104 25.764803 25.770943 25.764803l824.737724 0c14.213723 0 25.764803-11.537777 25.764803-25.764803C948.633498 495.307829 937.081395 483.770052 922.866648 483.770052zM98.357122 148.815327c-14.213723 0-25.764803 11.539824-25.764803 25.768897 0 14.227026 11.55108 25.76378 25.764803 25.76378M98.128925 200.346981l824.737724 0c14.213723 0 25.764803-11.536754 25.764803-25.76378 0-14.229073-11.55108-25.768897-25.764803-25.768897L98.128925 148.814304c-14.21884 0-25.770943 11.539824-25.770943 25.768897C72.359005 188.81125 83.911108 200.346981 98.128925 200.346981z"
            fill="#515151"
            p-id="2957"
          ></path>
        </svg>
      </div>
    </div>
    <div
      class="messageList"
      ref="messageListRef"
    >
      <ul>
        <div
          class="more"
          @click="moreMessage"
        >加载更多...</div>
        <div
          v-for="(msg,index) in msgList"
          :key="index"
        >
          <li v-if="msg.user_id == myId">
            <div class="self-bubble">
              <img
                v-if="msg.avatar"
                :src="msg.avatar"
                alt=""
              >
              <img
                v-else
                src="../../../../../assets/avatar1.svg"
                alt=""
              >
              <span
                class="messageInfo"
                v-html="msg.message"
              > </span>
            </div>
          </li>
          <li v-else>
            <div class="other-bubble">
              <img
                v-if="msg.avatar"
                :src="msg.avatar"
                alt=""
              >
              <img
                v-else
                src="../../../../../assets/avatar1.svg"
                alt=""
              >
              <div class="other-message">
                <span>{{msg.username}}</span>
                <span
                  class="messageInfo"
                  v-html="msg.message"
                > </span>
              </div>

            </div>
          </li>
        </div>

      </ul>
    </div>
    <!-- 群介绍 -->
    <el-drawer
      :visible.sync="isShowGroupsDetail"
      title="群介绍"
      direction="rtl"
      @close="closeShowGroupDetail()"
    >
      <GroupDetail :room='room'></GroupDetail>
    </el-drawer>
  </div>
</template>
<script>
import GroupDetail from "./GroupDetail";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      isShowGroupsDetail: false,
      myId: this.$store.state.users.userInfo.id,
      page: 1,
      pageSize: 15,
    };
  },

  props: ["msgList", "room"],
  methods: {
    openShowGroupDetail() {
      this.isShowGroupsDetail = true;
    },
    closeShowGroupDetail() {
      this.isShowGroupsDetail = false;
    },
    // 滚动消息列表到底部
    scrollToBottom() {
      // 使用 $refs 获取消息列表的 DOM 元素
      const messageList = this.$refs.messageListRef;
      // 将消息列表滚动到底部
      if (messageList) {
        messageList.scrollTop = messageList.scrollHeight;
      }
    },
    async moreMessage() {
      this.page += 1;
      this.$store.dispatch("updateMessageList", {
        room_id: this.room.id,
        page: this.page,
        pageSize: this.pageSize,
      });
    },
  },
  components: {
    GroupDetail,
  },
  // 在组件中添加 updated 生命周期钩子
  // updated() {
  //   this.scrollToBottom();
  // },
  mounted() {
    this.scrollToBottom();
    this.$bus.$on("clickScroll", () => {
      console.log("触发滚动到底部事件");
      setTimeout(() => {
        this.scrollToBottom();
      }, 100);
    });
    this.$bus.$on("haveSendMsg", () => {
      console.log("触发滚动到底部事件");
      setTimeout(() => {
        this.scrollToBottom();
      }, 100);
    });
    console.log("-----------------------------", this.room);
    this.$socket.on("chatMessage", (msg, room_id) => {
      console.log("触发的消息--", msg, room_id);
      this.msgList.push(msg);
      // 收到确认消息后，触发获取消息列表的操作
      const dataInfo = {
        room_id: room_id,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$store.dispatch("getMessageList", {
        room_id: room_id,
        page: this.page,
        pageSize: this.pageSize,
      });
    });
    this.page = 1;
  },
};
</script>
 
<style scoped lang='less'>
.chatdetial {
  width: 100%;
  display: flex;
  flex-flow: column;

  .header {
    height: 11%;
    font-size: 18px;
    line-height: 60px;
    border-bottom: 2px solid #ececec;
    padding: 0px 20px;
    background-color: #a4b6ea;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .title-box {
      display: flex;
      justify-content: center;
      align-content: center;
      width: 100%;
    }
  }

  .messageList {
    height: 80%;
    display: flex;
    padding: 10px 20px;
    overflow-y: auto;
    ul {
      width: 100%;
      .more {
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
        color: #888;
        font-size: 14px;
      }
      li {
        width: 100%;
        margin-top: 20px;
        list-style-type: none;
        .self-bubble {
          display: flex;
          flex-direction: row-reverse;
          align-items: flex-start;
          justify-content: flex-start;

          & > img {
            width: 45px;
            border: 1px solid #eaf997;
          }
          .messageInfo {
            background-color: #bbdced;
            min-height: 1rem;
            min-width: 1rem;
            max-width: 20rem;
            word-wrap: break-word; /* 兼容性较好的属性 */
            display: inline-block;
            padding: 0.5rem;
            margin-right: 1rem;
            text-align: center;
            line-height: 2rem;
            border-radius: 6px;
          }
        }
        .other-bubble {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin-bottom: 14px;
          & > img {
            width: 45px;
            border: 1px solid #eaf997;
          }

          .other-message {
            display: flex;
            flex-direction: column;

            min-height: 1rem;
            min-width: 1rem;
            padding: 0.4rem;
            margin-left: 0.7rem;
            text-align: center;
            line-height: 2rem;
            border-radius: 4px;
            margin-top: -16px;
            & > span:nth-child(1) {
              display: flex;
              justify-content: flex-start;
              opacity: 0.6;
              padding-right: 20px;
            }
            .messageInfo {
              background-color: #f1f1f1;
              min-height: 1rem;
              min-width: 1rem;
              max-width: 20rem;
              word-wrap: break-word; /* 兼容性较好的属性 */
              display: inline-block;
              padding: 0.5rem;
              margin-right: 1rem;
              text-align: center;
              line-height: 2rem;
              border-radius: 6px;
            }
          }
        }
      }
    }
  }
  .messageList::-webkit-scrollbar {
    display: none;
  }
}

.handlePanel {
  display: flex;
  justify-content: space-between;

  div {
    cursor: pointer;
  }
}
:deep(.el-drawer) {
  width: 350px !important;
}
</style>